import {IContext, INodeImpl, ThemeName} from "@rockyf/easy-design";
import * as echarts from 'echarts'

export default function () {
  return {
    setup(ctx: IContext): HTMLElement {
      const el = document.createElement('div')
      el.classList.add('node-chart')
      return el
    },
    hooks: {
      create() {
        this.chart = echarts.init(this.host!, this.$ctx!.theme)
      },
      update(props?: Record<string, any>) {
        this.chart.setOption(props?.options)
      },
      themeChanged(theme: ThemeName, props?: Record<string, any>) {
        this.chart?.dispose()
        this.chart = echarts.init(this.host!, theme)
        this.chart.setOption(props?.options)
      },
      resize() {
        this.chart?.resize()
      }
    }
  } as INodeImpl<{ chart: any }>
}